<div class="middle">
  <div class="middle-header header-toolbar">
    <div class="container-fluid">
      <div class="page-header page-header-bleed-right page-header-bleed-left">
        <h1>Other Resources</h1>
      </div>
      <div class="data-toolbar other-resources-toolbar">
        <ui-select class="data-toolbar-dropdown" ng-model="kindSelector.selected" theme="bootstrap" search-enabled="true" ng-disabled="kindSelector.disabled" title="Choose a resource">
          <ui-select-match placeholder="Choose a resource to list...">{{$select.selected.kind | humanizeKind : true}}</ui-select-match>
          <ui-select-choices repeat="kind in kinds | filter : {kind: $select.search} : matchKind | orderBy : 'kind'">
            <div ng-bind-html="(kind.kind | humanizeKind : true) | highlight: $select.search"></div>
            <small ng-if="isDuplicateKind(kind.kind)" ng-bind-html="kind.group | highlight: $select.search" class="text-muted"></small>
          </ui-select-choices>
        </ui-select>
        <div class="vertical-divider"></div>
        <div class="data-toolbar-filter">
          <project-filter></project-filter>
        </div>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div ng-if="(resources | hashSize) == 0">
            <p ng-if="!kindSelector.selected">
              <em>Select a resource from the list above...</em>
            </p>
            <div ng-if="kindSelector.selected" class="empty-state-message text-center">
              <div ng-if="!filterWithZeroResults">
                <h2>No {{resourceName}}.</h2>
                <p>
                  No {{resourceName}} have been added to project {{projectName}}.
                </p>
              </div>
              <div ng-if="filterWithZeroResults">
                <h2>The filter is hiding all {{resourceName}}. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
              </div>
            </div>
          </div>
          <table ng-if="(resources | hashSize) > 0" class="table table-bordered table-mobile table-layout-fixed">
            <colgroup>
              <col class="col-sm-3">
              <col class="col-sm-2">
              <col class="col-sm-5">
              <col class="col-sm-2">
            </colgroup>
            <thead>
              <tr>
                <th>Name</th>
                <th>Created</th>
                <th>Labels</th>
                <th><span class="sr-only">Actions</span></th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="resource in resources | orderObjectsByDate : true">
                <td data-title="Name">{{resource.metadata.name}}</td>
                <td data-title="Created"><span am-time-ago="resource.metadata.creationTimestamp"></span></td>
                <td data-title="Labels">
                  <em ng-if="(resource.metadata.labels | hashSize) === 0">none</em>
                  <labels labels="resource.metadata.labels" clickable="true" kind="{{kindSelector.selected.kind | kindToResource : true }}" project-name="{{resource.metadata.namespace}}" limit="3" filter-current-page="true"></labels></td>
                <td data-title="Actions" class="text-xs-left text-right">
                  <span uib-dropdown ng-hide="!(selectedResource | canI : 'update') && !(selectedResource | canI : 'delete')">
                    <button type="button" class="dropdown-toggle btn btn-default" data-toggle="dropdown">
                      Actions
                      <span class="caret"></span>
                    </button>
                    <ul uib-dropdown-menu class="dropdown-menu-right" aria-labelledby="{{resource.metadata.name}}_actions">
                      <li ng-if="selectedResource | canI : 'update'">
                        <a ng-href="{{resource | editYamlURL : getReturnURL()}}" role="button">Edit YAML</a>
                      </li>
                      <li ng-if="selectedResource | canI : 'delete'">
                        <delete-link
                          kind="{{kindSelector.selected.kind}}"
                          group="{{kindSelector.selected.group}}"
                          resource-name="{{resource.metadata.name}}"
                          project-name="{{resource.metadata.namespace}}"
                          stay-on-current-page="true"
                          success="loadKind">
                        </delete-link>
                      </li>
                    </ul>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>
